<template>
  <div class="cartContainer">
    <van-nav-bar>
      <template #left>
        <p>购物车</p>
      </template>
      <template #right>
        <van-icon name="circle" size="50" />
      </template>
    </van-nav-bar>

    <!-- div代表块级意思，标识多个元素是个整体，多用于判断，不会在页面渲染 -->
    <div v-if="!id" class="ip">
      <div class="header">
        <p>30天无忧退货</p>
        <p>48小时快速退货</p>
        <p>满99元免邮费</p>
      </div>
      <div class="contentContainer">
        <img
          class="cartImg"
          src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noCart-d6193bd6e4.png?imgdiv&type=webp"
          mode=""
        />
        <div class="addMore">请先登录</div>
      </div>
    </div>

    <div v-else>
      <van-card
        :price="999 * shop[0].num"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tag>
          <van-checkbox v-model="shop[0].checked"></van-checkbox>
        </template>
        <template #tags>
          <van-dropdown-menu>
            <van-dropdown-item v-model="shop[0].value" :options="option" />
          </van-dropdown-menu>
        </template>
        <template #bottom>
          <div>自营仓商品满99包邮</div>
        </template>
        <template #num>
          <van-stepper v-model="shop[0].num" />
        </template>
      </van-card>
      <van-card
        :price="777 * shop[1].num"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tag>
          <van-checkbox v-model="shop[1].checked"></van-checkbox>
        </template>
        <template #tags>
          <van-dropdown-menu>
            <van-dropdown-item v-model="shop[1].value" :options="option" />
          </van-dropdown-menu>
        </template>
        <template #bottom>
          <div>自营仓商品满99包邮</div>
        </template>
        <template #num>
          <van-stepper v-model="shop[1].num" />
        </template>
      </van-card>
      <van-card
        :price="888 * shop[2].num"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tag>
          <van-checkbox v-model="shop[2].checked"></van-checkbox>
        </template>
        <template #tags>
          <van-dropdown-menu>
            <van-dropdown-item v-model="shop[2].value" :options="option" />
          </van-dropdown-menu>
        </template>
        <template #bottom>
          <div>自营仓商品满99包邮</div>
        </template>
        <template #num>
          <van-stepper v-model="shop[2].num" />
        </template>
      </van-card>
      <van-submit-bar
        :price="9999"
        button-text="下单"
        @submit="toOrder"
        :safe-area-inset-bottom="false"
        class="foot"
      >
        <van-checkbox v-model="checkedAll" @click="handlerAll"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { reqCar } from "../../api";
import { readToken } from "../../utils/auth";
export default {
  name: "buy",
  data() {
    return {
      id: false,
      num: 1,
      value: 0,
      checked: true,
      option: [
        { text: "类型", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      shop: [
        {
          checked: true,
          num: 1,
          value: 0,
        },
        {
          checked: true,
          num: 1,
          value: 0,
        },
        {
          checked: true,
          num: 1,
          value: 0,
        },
      ],
      checkedAll: false,
    };
  },

  methods: {
    async carData() {
      let result = await reqCar();
      console.log(result);
    },
    toOrder() {
      this.$router.push("/order");
    },
    getToken() {
      if (readToken("token")) {
        this.id = true;
      } else {
        this.id = false;
      }
    },
    handlerAll() {
      let checkedAll = this.checkedAll;
      this.shop.forEach((item) => {
        item.checked = checkedAll;
      });
    },
  },
  watch: {
    shop: {
      deep: true,
      immediate: true,
      handler() {
        if (
          this.shop[0].checked &&
          this.shop[1].checked &&
          this.shop[2].checked
        ) {
          this.checkedAll = true;
        } else if (
          this.shop[0].checked ||
          this.shop[1].checked ||
          this.shop[2].checked
        ) {
          this.checkedAll = false;
        }
      },
    },
  },
  mounted() {
    this.carData();
    this.getToken();
  },
};
</script>

<style lang="less" scoped>
.cartContainer {
  background-color: #f4f4f4;
  height: 100%;
}
.header {
  box-sizing: border-box;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  p {
    margin: 0.2rem 0.3rem;
    font-size: 0.3rem;
  }
}
.contentContainer {
  margin-top: 5rem;
  text-align: center;
}
.foot {
  bottom: 50px;
}
</style>
